<template>
  <div class="manager-container">
    <!-- 头部 -->
    <div class="manager-header">
      <div class="manager-header-left">
      </div>
      <div class="manager-header-center">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/student/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- 主体 -->
    <div class="manager-main">
      <!-- 侧边栏 -->
      <div class="manager-main-left">
        <el-menu
            :default-openeds="['competition', 'course', 'feedback']"
            :default-active="$route.path"
            router
            style="border: none"
        >
          <!-- 竞赛管理模块 -->
          <el-submenu index="competition">
            <template slot="title">
              <i class="el-icon-trophy"></i><span>学生竞赛管理</span>
            </template>
            <el-menu-item index="/teacher/learnProgress/competitionList">整体竞赛参与情况</el-menu-item>
            <el-menu-item index="/teacher/learnProgress/competitionAward">整体获奖情况</el-menu-item>
          </el-submenu>

          <!-- 课程管理模块 -->
          <el-submenu index="course">
            <template slot="title">
              <i class="el-icon-reading"></i><span>学生课程管理</span>
            </template>
            <el-menu-item index="/teacher/learnProgress/Course">整体课程成绩</el-menu-item>
            <el-menu-item index="/teacher/learnProgress/Scores">整体课程学习进度</el-menu-item>
<!--            <el-menu-item index="/">发布课程测试题目</el-menu-item>-->
          </el-submenu>

          <!-- 学习反馈模块 -->
          <el-submenu index="feedback">
            <template slot="title">
              <i class="el-icon-message"></i><span>学习反馈</span>
            </template>
            <el-menu-item index="/teacher/learnProgress/StudyHabits">学生学习习惯</el-menu-item>
            <el-menu-item index="/teacher/learnProgress/StudentGrowth">德智体美劳</el-menu-item>
            <el-menu-item index="/teacher/learnProgress/StudentScores">学生成绩分析</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

            <!-- 右侧内容区域 -->
            <div class="manager-main-right">
              <!-- 欢迎卡片 -->
              <el-card class="welcome-card" shadow="hover">
                <h3>欢迎使用教师学习管理</h3>
                <p>在此页面中，您可以查看学生的学习进度、竞赛参与情况以及学习反馈。</p>
              </el-card>

              <!-- 示例统计信息 -->
              <div class="stats">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                      <i class="el-icon-user" style="font-size: 24px; color: #409EFF"></i>
                      <div class="stat-info">
                        <h2>{{ stats.studentCount }}</h2>
                        <p>学生总数</p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                      <i class="el-icon-notebook-2" style="font-size: 24px; color: #67C23A"></i>
                      <div class="stat-info">
                        <h2>{{ stats.courseCount }}</h2>
                        <p>课程总数</p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                      <i class="el-icon-trophy" style="font-size: 24px; color: #E6A23C"></i>
                      <div class="stat-info">
                        <h2>{{ stats.competitionParticipationCount }}</h2>
                        <p>竞赛参与</p>
                      </div>
                    </el-card>
                  </el-col>

                  <el-col :span="6">
                    <el-card class="stat-card" shadow="hover">
                      <i class="el-icon-data-analysis" style="font-size: 24px; color: #E6A23C"></i>
                      <div class="stat-info">
                        <h2>{{ stats.averageCompletionRate }}</h2>
                        <p>课程平均完成率</p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>

              <!-- 路由视图 -->
              <router-view />
            </div>
          </div>
        </div>
      </template>

      <script>
        import axios from 'axios';

        export default {
          name: 'LearnProgress',
          data() {
            return {
              stats: {
                studentCount: 0,
                courseCount: 0,
                competitionParticipationCount: 0,
                averageCompletionRate: 0,
              },
            };
          },
          computed: {
            currentTitle() {
              return this.$route.meta.name || '内容展示';
            },
          },
          mounted() {
            this.fetchStatistics();
          },
          methods: {
            async fetchStatistics() {
              try {
                const response = await axios.get('/api/statistics/dashboard');
                console.log('获取的统计数据:', response.data);  // 调试打印响应数据
                this.stats = response.data;  // 更新 stats
              } catch (error) {
                console.error('获取统计信息失败', error);
              }
            },
          },
        };
      </script>

      <style scoped>
        .manager-container {
          display: flex;
          flex-direction: column;
          height: 100vh;
        }

        .manager-header {
          display: flex;
          justify-content: space-between;
          padding: 10px 20px;
          background-color: #f5f5f5;
        }

        .manager-header-left .title {
          font-size: 24px;
          font-weight: bold;
        }

        .manager-main {
          display: flex;
          flex: 1;
        }

        .manager-main-left {
          width: 240px;
          border-right: 1px solid #e4e7ed;
        }

        .manager-main-right {
          flex-grow: 1;
          padding: 20px;
          background-color: #fafafa;
        }

        .welcome-card {
          margin-bottom: 20px;
          text-align: center;
        }

        .stats {
          margin-bottom: 20px;
        }

        .stat-card {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px;
          text-align: left;
        }

        .stat-info h2 {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
        }

        .stat-info p {
          margin: 0;
          font-size: 14px;
          color: #909399;
        }
      </style>


<!--<script>-->
<!--export default {-->
<!--  name: 'LearnProgress',-->
<!--  computed: {-->
<!--    currentTitle() {-->
<!--      return this.$route.meta.name || '内容展示';-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.manager-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100vh;-->
<!--}-->

<!--.manager-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  padding: 10px 20px;-->
<!--  background-color: #f5f5f5;-->
<!--}-->

<!--.manager-header-left .title {-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.manager-main {-->
<!--  display: flex;-->
<!--  flex: 1;-->
<!--}-->

<!--.manager-main-left {-->
<!--  width: 240px;-->
<!--  border-right: 1px solid #e4e7ed;-->
<!--}-->

<!--.manager-main-right {-->
<!--  flex-grow: 1;-->
<!--  padding: 20px;-->
<!--}-->
<!--</style>-->
